<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-table :data="channelList" style="width: 100%">
    <el-table-column prop="channelCode" label="货道编号">
    </el-table-column>
    <el-table-column label="商品名称">
      <template slot-scope="scope">
        <span>{{ scope.row.skuName ? scope.row.skuName : "-" }}</span>
      </template>
    </el-table-column>
    <template v-if="isReplenish">
      <el-table-column label="当前数量">
        <template slot-scope="scope">
          <span>{{ scope.row.skuName ? scope.row.currentCapacity : "-" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="还可添加">
        <template slot-scope="scope">
          <span>{{ scope.row.skuName ? scope.row.max : "-" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="补满数量" width="200px">
        <template slot-scope="scope">
          <el-input-number
            v-if="scope.row.skuName"
            v-model="scope.row.expectCapacity"
            controls-position="right"
            :min="1"
            :max="10"
            weight="150"
          ></el-input-number>
          <span v-else>货道暂无商品</span>
        </template>
      </el-table-column></template>
    <template v-else>
      <el-table-column label="补货数量">
        <template slot-scope="scope">
          <span>{{ scope.row.expectCapacity }}</span>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  props: {
    channelList: {
      required: true,
      type: Array
    },
    isReplenish: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  margin-left: 30px;
  .el-input-number--mini {
    width: 100px;
  }
  ::v-deep .el-input {
    width: 100px !important;
  }
}
</style>
